<template>
  <div>
    <section>
    </section>
    <section >
      <el-button style="margin-left: 0px;margin-right:5px" v-if="hasPermission('truck:truckPrefix:add')" type="primary"
        size="small" @click="add">新增</el-button>
      <section class="right-but" style="display:flex">
        <el-button type="text" style="margin-right:-13px"  @click="refreshList(page,orderBy.name,orderBy.method,queryForm.selectValue,queryForm.checkedState)">
          <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png" >
        </el-button>
        <PopoverBut :checkedProps="checkedProps"  :options="options" @getCheckeds="handlerCloumn"></PopoverBut>
      </section>
    </section>
    <el-table size="mini" v-loading="loading" :data="tableData" style="width: 100%; margin-top: 10px" border
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }" :row-class-name="tableRowClassName" @sort-change="sortthiscolumn">
      <el-table-column type="index" label="序号" width="70" align="center">
        <template slot-scope="scope">
          <span>{{
            (page.pageNo - 1) * page.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="prefix" label="车牌前缀" sortable="axle">
      </el-table-column>
      <el-table-column prop="decribe" label="描述">
      </el-table-column>
      <span v-for="(item, index) in checkedProps" :key="index">
        <el-table-column  prop="createDate" :label="item" v-if="item==='创建时间'"></el-table-column>
          <el-table-column  prop="createBy.loginName" :label="item" v-if="item==='创建人'"></el-table-column>
          <el-table-column  prop="updateDate" :label="item" v-if="item==='上次操作时间'" sortable="update_date"></el-table-column>
          <el-table-column  prop="updateBy.loginName" :label="item" v-if="item==='上次操作人'"></el-table-column>
      </span>
      <el-table-column prop="address" label="操作" width="149">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" v-if="hasPermission('truck:truckPrefix:edit')" @click="edit(scope.row)">修改
          </el-link>
          <el-link type="primary" :underline="false" v-if="hasPermission('truck:truckPrefix:del')" @click="del(scope.row.id)">删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-size="page.pageSize"
      :current-page="page.pageNo" layout="total,sizes,prev, pager, next, jumper" :total="page.total">
    </el-pagination>
    <PrefixFrom ref="prefixFrom" @refreshDataList="refreshList(page, 'update_date', 'desc')"></PrefixFrom>
  </div>
</template>
<script>
  import PrefixFrom from './prefixFrom'
  import PopoverBut from '@/components/button/popoverBut'
  const options1 = []
  export default {
    components: {
      PrefixFrom,
      PopoverBut
    },
    data () {
      return {
        checkedProps: options1,
        ShowCloum: {
          createDate: ''
        },
        options: [
        { label: '上次操作人', key: 'updateBy.loginName' },
        { label: '上次操作时间', key: 'updateDate' },
        { label: '创建人', key: 'createBy.loginName' },
        { label: '创建时间', key: 'createDate' }],
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        tableData: [{
          prefix: '11'
        }],
        orderBy: {
          name: 'update_date',
          method: 'desc'
        },
        loading: false
      }
    },
    methods: {
      // 获取数据列表
      refreshList (params, orderName, orderByAORC) {
        this.loading = true
        this.$http({
          url: '/truck/prefix/list',
          method: 'get',
          params: {
            'pageNo': params.pageNo,
            'pageSize': params.pageSize,
            'orderBy': orderName,
            'orderByAORC': orderByAORC
          }
        }).then(({
          data
        }) => {
          if (data.code === '200') {
            this.tableData = data.result.list
            this.page.total = data.result.count
            this.loading = false
          }
        })
      },
      edit (row) {
        this.$refs.prefixFrom.init('edit', row)
      },
      add () {
        this.$refs.prefixFrom.init('add')
      },
      del (id) {
        let ids = id || this.dataListSelections.map(item => {
          return item.id
        }).join(',')
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          this.loading = true
          this.$http({
            url: '/truck/prefix/delete',
            method: 'delete',
            params: {'ids': ids}
          }).then(({data}) => {
            if (data && data.success) {
              this.$message.success(data.message)
              this.refreshList(this.page, 'update_date', 'desc')
            }
            this.loading = false
          })
        })
      },
      // 排序
      sortthiscolumn (a) {
        this.orderBy.name = a.prop
        this.page.pageNo = 1
        if (a.order === 'ascending') {
          this.orderBy.method = 'asc'
        } else {
          this.orderBy.method = 'desc'
        }
        this.refreshList(this.page, this.orderBy.name, this.orderBy.method)
      },
      // 是否显示某列数据
      handlerCloumn (e) {
        this.checkedProps = e
      },
      handleSizeChange (e) {
        this.page.pageSize = e
        this.refreshList(this.page, 'update_date', 'desc')
      },
      handleCurrentChange (e) {
        this.page.pageNo = e
        this.refreshList(this.page, 'update_date', 'desc')
      },
      tableRowClassName ({ row, rowIndex }) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      }

    },
    mounted () { // dom加载完以后执行的函数，比如第一次打开网页要请求表格数据可以在这个里面写函数
      this.refreshList(this.page, 'update_date', 'desc')
    }
  }
</script>
<style lang="scss" scoped>
::v-deep .el-input--small .el-input__inner {
  height: 36px;
  line-height: 32px;
  width: 230px;
}
.queryForm {
  position: relative;
  .but-container {
    top: 20px;
    margin-left: 35px;
  }
}

.el-table .success-row {
  background: #f0f9eb;
}
::v-deep .el-table .warning-row {
  background: #f7f7f7;
}
</style>
